<template>
  <div class="common-warp wh100 warp-bg">
    <Search @onSearch="handleSearch" :searchOptions="state.data.searchOptions" @change="handleChange" />
    <Table v-bind="state.data" @selectCol="handleSelector" @onBottomBtn="handleBottomBtn" />
  </div>
</template>

<script lang='ts' setup>
import '@/theme/index.less';
import { ref, reactive, onMounted } from 'vue';
import Search from '@/components/search/index.vue';
import Table from '@/components/table/index.vue';
import Add from '@/components/add/index.vue';
import wx from "weixin-js-sdk";
import { useRoute, useRouter } from 'vue-router'


import { usePersonEmployeePageApi, useAccessCasbinEmployeeCreateApi, useAttendTeamEmployeeCreateApi } from '@/api';
import type { EmployeeItem } from '@/types/person/employee';
import { message } from 'ant-design-vue';


const router = useRouter()
const route = useRoute()

const state = reactive({
  data: {
    // 列表数据（必传）
    list: [] as EmployeeItem[],
    header: [
      //开启表格序号
      // {
      //   title: "序号",
      //   key: "key",
      //   align: "center",
      //   customRender: ({ index }) => `${index + 1}`,
      // },
      { dataIndex: 'code', title: '工号', ellipsis: true , align: 'center'},
      { dataIndex: 'name', title: '姓名', ellipsis: true , align: 'center'},
    ],
    // 配置项（必传） 
    config: {
      rowkey: 'code',     // antDesign使用rowKey来指定数据列的主键,与删除回传key保持一致
      total: 0,           // 列表总数
      loading: false,     // loading加载
      isBorder: true,     // 是否显示表格边框
      isSelection: true,  // 是否显示表格多选
      page: true,
      haveDel: true,
      bottomBtn: true,
      btnName: '提交'
    },
    params: {
      pageNum: 1,
      pageSize: 10,
    },
    searchOptions: [
      { label: '名称', value: 'name' }
    ],
  },
  ruleCode: '',
  employeeCodeList: [] as string[]
});

const getData = async () => {
  let { data: { pageNum, pageSize, total, list } } = await usePersonEmployeePageApi(state.data.params)
  state.data.list = list || []
  state.data.params.pageSize = pageSize
  state.data.params.pageNum = pageNum
  state.data.config.total = total
}


onMounted(() => {
  document.title = '新增人员';
  let { code }: any = route.query
  state.ruleCode = code
  getData()
})

const handleSearch = ({ selectValue, inputValue }: any) => {
  let conditions = {} as any
  conditions[selectValue] = inputValue
  state.data.params = Object.assign({}, state.data.params, conditions);
  getData()
}
const handleChange = () => {
  state.data.params = {
    pageNum: 1,
    pageSize: 10,
  }
}
const handleSelector = (list: any) => {
  console.log(list, '234');
  state.employeeCodeList = list.map((item: any) => item.code)
}
const handleBottomBtn = async () => {
  if (!state.employeeCodeList.length) {
    message.warning('请至少选择一项')
    return
  }
  console.log('handleBottomBtn');
  await useAttendTeamEmployeeCreateApi({ ruleCode: state.ruleCode, employeeCodeList: state.employeeCodeList })
  message.success('操作成功',2)
  setTimeout(() => {
    router.push({
      name: "TeamEmployee",
      query: {
        code: state.ruleCode
      }
    })
  }, 2300)
}
</script>
<style scoped lang='less'>
.box {
  color: var(--aaa);
  width: 750px;
  height: 50px;
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
}

.no {
  width: 200px;
  height: 50px;
  background-color: bisque;
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
}
</style>